<template>
  <view class="ss-flex text">
    <view>{{ days }} 天</view>
    <view>{{ hours }} 时</view>
    <view>{{ minutes }} 分</view>
    <view>{{ seconds }} 秒</view>
  </view>
</template>
 
<script>
export default {
  props: {
    deadline: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      days: 0,
      hours: 0,
      minutes: 0,
      seconds: 0
    };
  },
  created() {
    this.countdown();
  },
  methods: {
    countdown() {
      const endTime = new Date(this.deadline).getTime();
      const countdown = setInterval(() => {
        const now = new Date().getTime();
        const distance = endTime - now;
 
        if (distance < 0) {
          clearInterval(countdown);
          this.days = this.hours = this.minutes = this.seconds = 0;
        } else {
          this.days = Math.floor(distance / (1000 * 60 * 60 * 24));
          this.hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
          this.minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
          this.seconds = Math.floor((distance % (1000 * 60)) / 1000);
        }
      }, 1000);
    }
  }
};
</script>
<style scoped lang="scss">
	.text {
		color: #cf3835;
	}
</style>